<template>
    <div class="receive-card">
        <div class="left bold" :class="{ flex: !price }">
            <span class="price" v-if="price">￥{{ price }}</span>
            <span class="text">{{ detail1 }}</span>
        </div>
        <div class="right">
            <div class="part">
                <div class="first-month">
                    <span>{{ classify1 }}</span>
                </div>
                <span class="ee">{{ classify2 }}</span>
            </div>
            <span class="detail f12">{{ detail2 }}</span><br />
            <span class="valid f12">{{ invalid }}</span>
            <div class="time f12">
                <span class="num" v-if="time">{{ time }}</span>
                <span class="change" :class="getClass(state)" @click="changeHandle">
                    {{ getState(state) }}
                </span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "CouponComponent",
    props: {
        price: Number,
        detail1: String,
        classify1: String,
        classify2: String,
        detail2: String,
        invalid: String,
        time: String,
        state: Number,
    },
    components: {

    },
    data() {
        return {
        }
    },
    methods: {
        changeHandle() {
            this.$emit("change")
        },
        getState(index) {
            return ["立即领取", "已领取", "去使用"][index];
        },
        getClass(index) {
            return ["go", "end", "use"][index]
        }
    }
}
</script>
<style lang="scss" scoped>
.receive-card {
    height: 120px;
    display: flex;
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
    color: white;
    box-shadow: 1px 1px 3px 0px #acabab8d;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    .left {
        background-color: red;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 35%;
        text-align: center;

        &.flex {
            justify-content: center;
        }

        .price {
            margin-top: 30px;
            margin-bottom: 10px;
        }
    }

    .right {
        width: 65%;
        padding: 10px;
        color: #000000;
        position: relative;
        padding-top: 15px;

        .part {
            display: flex;
            flex-direction: row;
            align-items: flex-end;

            .first-month {
                padding: 1px 3px;
                background-color: red;
                border-radius: 8px;
                color: white;

                span {
                    font-size: 12px;
                    display: inline-block;
                    transform: scale(.8);
                }
            }

            .ee {
                font-size: 12px;
                display: inline-block;
                transform: scale(.8);
            }
        }

        .detail {
            display: inline-block;
            margin: 5px 0;
        }

        .time {
            margin-top: 3px;

            .change {
                position: absolute;
                right: 7px;
                bottom: 7px;
                padding: 5px 16px;
                border-radius: 13px;
                color: white;

                &.go {
                    background-color: #fd0100;
                }

                &.end {
                    background-color: #989898;
                }

                &.use {
                    color: #fd0100;
                    border: 1px solid #fd0100;
                }
            }
        }
    }
}
</style>